<template>
    <div>
        <h2>{{ msg }}</h2>
        <div id="c1"></div>
    </div>
</template>

<script>
    import * as G2 from '@antv/g2'
    // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    // 例如：import 《组件名称》 from '《组件路径》';
    export default {
        name: "g2Demo",
        components: {},

        mounted() {
            this.getStatistics();
           // console.log(this.data)

            this.initComponent();
        },
        data() {
            return {
                msg: "",
                chart: null,
                data: [
                     { genre: "2020-12-24", sold: 45 },
                      { genre: "2020-12-25", sold: 13 },
                    { genre: "2020-12-26", sold: 5 },
                    { genre: "2020-12-27", sold: 13 },
                    {},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}
                    // { genre: "2020-12-26", sold: 2200 },
                    // { genre: "2020-12-27", sold: 3000 },
                    // { genre: "2020-12-28", sold: 4000 }

                ]
            };
        },


        // 方法集合
        methods: {
            getStatistics(){
                const _this=this
                axios.get('http://localhost:8181/student/getCount').then(function (resp) {
                    _this.data=resp.data
                })
            },

            initComponent() {
                // 此函数为个人习惯,喜欢创建一个初始化的函数
                this.msg = "关注人数";
                const chart = new G2.Chart({
                    container: "c1",
                    width: 800,
                    height: 500
                })
                // const _this=this
                // axios.get('http://localhost:8181/student/getCount').then(function (resp) {
                //     _this.data=resp.data
                //
                // })
                // console.log(this.data)
                // console.log(this.data)
                chart.data(this.data);
                chart
                    .interval()
                    .position("genre*sold")
                    .color("genre");
                this.chart = chart
                this.chart.render()
                // console.log(this.data)
            }
        },
        created(){
            //this.getStatistics();
            const _this=this
            axios.get('http://localhost:8181/student/getCount').then(function (resp) {
              //  _this.data=Object.assign({},resp.data)
                resp.data.forEach(function (item,i) {
                    _this.data[i].genre=item.genre
                    _this.data[i].sold=item.sold
                } )
              //  _this.data[0].genre=resp.data[0].genre
               //  console.log(_this.data)

            })
            console.log(_this.data)

        },
        // 计算属性
        computed: {}
    }
</script>